<template>

  <div style="margin-top: 60px;">
    <div style="background: white;padding:20px">
      <div style="display: flex;justify-content: center;margin: 20px 0;">
        <img style="width:50px;height:50px" src="@/assets/fang_dog.png">
      </div>
      <van-field
        v-model="content"
        rows="6"
        autosize
        label="留言"
        type="textarea"
        maxlength="100"
        placeholder="请输入留言"
        show-word-limit
      />
      <div style="display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px">
<!--        <div v-if="!isLogin" class="thank">请先登录</div>-->
        <van-button v-if="!isLogin" style="width:80%" :loading="btnLoading" @click="showLogin">请先登录</van-button>
        <van-button v-if="isLogin" style="width:80%" :loading="btnLoading" @click="saveDemand">提交</van-button>
      </div>
    </div>

    <div style="background-color:white;margin-top:10px;padding:20px;display:flex;justify-content: center;align-items:center;flex-direction: column;">
      <img style="width:150px;height:150px" src="@/assets/wechat.png"/>
      <div style="font-size: 14px;color: #858585;margin-top: 10px;margin-bottom: 10px">关注公众号U ´ᴥ` U</div>
    </div>
  </div>
</template>

<script>
  import {save} from '@/api/demand'
  import {getStore} from "@/utils/storage";
  import Bus from '@/utils/bus';

  export default {
    name: 'Share',
    components: {},
    computed: {
      isLogin() {
        return getStore('avatar') !== null
      },
    },
    data() {
      return {
        btnLoading: false,
        content: '',
      }
    },
    methods: {
      showLogin() {
        Bus.$emit("showLogin");
      },
      saveDemand() {
        if (this.content === '') {
          this.$toast("请输入内容");
          return;
        }
        if (this.content.length > 100) {
          this.$toast("超出字数限制");
          return;
        }

        this.btnLoading = true
        let params = {
          content: this.content
        }
        save(params).then(r1 => {
          this.btnLoading = false;
          this.$message.success("提交成功");
          this.content = '';
        }).catch(err => {
          this.btnLoading = false;
        })
      }
    }
  }
</script>

<style scoped>
  .title {
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 20px;
  }


  body {
    margin: 0;
    background: #ededed;
  }

  .content-wrap {
    width: 1200px;
    margin: 0 auto;
  }

  .content {
    margin-top: 20px;
    display: flex;
  }

  .content-left {
    width: 850px;
  }

  .content-right {
    /*background-color: yellow;*/
    width: 320px;
    margin-left: 30px;
  }

  .detail {
    background-color: white;
    padding: 50px 30px 50px 60px;

  }

  .item {
    display: flex;
    /*align-items: center;*/
    margin-bottom: 20px;
  }

  .input {
    width: 400px;
  }

  .login-tips {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .btn {
    margin-top: 10px;
    /*margin-left: 110px;*/
  }

  /*留言*/
  .adv-wrap {
    background-color: white;
    margin-bottom: 10px;
  }

  .adv {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

</style>
